<template>
  <div class="app-container">


    <el-table v-loading="loading" :data="carPackageList" @selection-change="handleSelectionChange">
      <el-table-column label="套餐名称" align="center" prop="serviceItemName" />
      <el-table-column label="套餐价格" align="center" prop="serviceItemPrice" />
      <el-table-column label="套餐备注" align="center" prop="serviceItemInfo" />
      <el-table-column label="部署时间" align="center" prop="createTime" width="180">
        <template slot-scope="scope">
          <span>{{ parseTime(scope.row.createTime, '{y}-{m}-{d}') }}</span>
        </template>
      </el-table-column>
      <el-table-column label="流程图" align="center" class-name="small-padding fixed-width">
        <template slot-scope="scope">
          <el-button size="mini" type="text" icon="el-icon-search" @click="handleQueryProcess(scope.row)">查看</el-button>
        </template>
      </el-table-column>
      <el-table-column label="状态" align="center" prop="status">
        <template slot-scope="scope">
          <dict-tag :options="dict.type.aud_car_package_status" :value="scope.row.status" />
        </template>
      </el-table-column>
    </el-table>

    <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize"
      @pagination="getList" />

    <!-- 流程图片显示框 -->
    <el-dialog title="流程图片" :visible.sync="openResourceImg" width="1200px">
      <div v-html="resourceImg"></div>
    </el-dialog>
  </div>
</template>

<script>
import { listDoneCarPackage, queryProcess } from "@/api/audit/carPackage";

export default {
  name: "CarPackage",
  dicts: ['aud_car_package_status'],
  data() {
    return {
      // 遮罩层
      loading: true,
      // 对话框控制变量
      open: false,
      // 总条数
      total: 0,
      // 套餐审核表格数据
      carPackageList: [],
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10
      },
      // 流程图片弹窗显示隐藏
      openResourceImg: false,
      // 流程图片对象
      resourceImg: '',
    };
  },
  created() {
    this.getList();
  },
  methods: {
    /** 查询套餐审核列表 */
    getList() {
      this.loading = true;
      listDoneCarPackage(this.queryParams).then(response => {
        this.carPackageList = response.rows;
        this.total = response.total;
        this.loading = false;
      });
    },
    handleQueryProcess(row) {
      queryProcess(row.instanceId).then((res) => {
        // 弹出框
        this.openResourceImg = true;
        // 设置显示内容
        this.resourceImg = res;
      }).catch((err) => {
        this.open = false;
      });
    }
  }
};
</script>
